<template>
	<view>
		<view class="m-address-empty" v-if="!addrInfo" @click="to_link('/pages2/shop-address/shop-address?type=select')">
			<text>添加收货地址</text>
			<image src="../static/shop/icon-right.png" mode=""></image>
		</view>
		<view class="m-address" v-else @click="to_link('/pages2/shop-address/shop-address?type=select')">
			<view class="m-address-left">
				<view class="m-address-font1">
					<text>{{addrInfo.name}}</text>
					<text class="u-m-l-30">{{addrInfo.phone}}</text>
				</view>
				<view class="m-address-font2">
					<text>{{addrInfo.areaName}}{{addrInfo.address}}</text>
				</view>
			</view>
			<view class="m-address-right">
				<image src="../static/shop/icon-right.png" mode=""></image>
			</view>
		</view>
		
		<view class="m-goods">
			<view class="m-goods-title">
				<text>商品信息</text>
			</view>
			<view class="m-list">
				<view class="m-item" v-for="(item,index) in list" :key="index">
					<view class="m-item-image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="m-item-content">
						<view class="m-item-title u-line-1">
							<text>{{item.title}}</text>
						</view>
						<view class="m-item-spec">
							<text>{{item.key_vals}}</text>
						</view>
						<view class="m-item-bottom">
							<view class="m-item-left">
								<text>x{{item.num}}</text>
							</view>
							<view class="m-item-right">
								<text class="m-item-price">{{item.price_sale}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="m-pay">
			<view class="m-pay-item" v-if="info.user_jifen">
				<view class="m-pay-left">
					<image src="../static/shop/tijiao_ico_jifen.png" mode=""></image>
					<text>积分支付</text>
					<text class="m-pay-font1">(共{{info.user_jifen}}积分)</text>
				</view>
				<view class="m-pay-right">
					<text>支付：{{info.jifen_canpay}}积分</text>
				</view>
			</view>
			<view class="m-pay-item" v-if="info.jifen_pay.if_open == 1">
				<view class="m-pay-left">
					<image src="../static/shop/tijiao_ico_weixin.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<view class="m-pay-right">
					<text>支付：￥{{info.jifen_pay.money}}</text>
				</view>
			</view>
		</view>
		
		<view class="m-remark">
			<view class="m-remark-label">
				<text>备注</text>
			</view>
			<view class="m-remark-textarea">
				<textarea v-model="params_info.remark" cols="30" rows="10" placeholder="请填写备注" placeholder-style="font-size:28rpx;color:#9A958F;"></textarea>
			</view>
		</view>
		
		<u-popup v-model="show" mode="bottom" :z-index="99" border-radius="20" :closeable="true">
			<view class="m-popup">
				<view class="m-popup-title">
					<text>费用明细</text>
				</view>
				<view class="m-popup-h3">
					<view class="m-popup-h3__left">
						<text>应付金额</text>
					</view>
					<view class="m-popup-h3__right">
						<text>{{info.order_jifen || 0}}积分</text>
					</view>
				</view>
				<view class="m-popup-cell" v-for="(item,index) in list" :key="index">
					<view class="m-popup-cell__left">
						<text class="m-popup-cell__left--title u-line-1">{{item.title}}{{item.title}}{{item.title}}</text>
						<text class="u-m-l-10">x{{item.num}}</text>
					</view>
					<view class="m-popup-cell__right">
						<text>{{item.price_sale}}积分</text>
					</view>
				</view>
				
				<view class="m-popup-grap"></view>
				
				<view class="m-popup-h3">
					<view class="m-popup-h3__left">
						<text>支付方式</text>
					</view>
				</view>
				<view class="m-popup-cell" v-if="info.user_jifen">
					<view class="m-popup-cell__left">
						<text>积分支付(共{{info.user_jifen}}积分)</text>
					</view>
					<view class="m-popup-cell__right">
						<text>{{info.jifen_canpay}}积分</text>
					</view>
				</view>
				<view class="m-popup-cell" v-if="info.jifen_pay.if_open == 1">
					<view class="m-popup-cell__left">
						<text>微信支付</text>
					</view>
					<view class="m-popup-cell__right">
						<text>￥{{info.jifen_pay.money}}</text>
					</view>
				</view>
				
			</view>
		</u-popup>
		
		<view class="m-bottom">
			<view class="m-bottom-left">
				<text>共{{listCountComupted}}件</text>
				<text class="u-m-l-20">合计</text>
				<text class="m-bottom-price">{{info.order_jifen || 0}}</text>
			</view>
			<view class="m-bottom-center">
				<view class="m-bottom-detail" @click="show = !show">
					<text>明细</text>
					<u-icon name="arrow-up" v-if="!show"></u-icon>
					<u-icon name="arrow-down" v-else></u-icon>
				</view>
			</view>
			<view class="m-bottom-right" @click="payFun">
				<text>提交订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				order_id:'',
				product_info:'',
				list:[],
				params_info: {
					product_info: [],
					peisong_type: 3, //1自提 2社区配送 3快递
					remark: '',
					yhq_id: 0,
					address_id:'',
				},
				addrInfo:null,
				info:{jifen_pay:{}},
			}
		},
		computed:{
			listCountComupted(){
				let count = 0
				this.list.forEach(item=>{
					count += Number(item.num)
				})
				return count
			}
		},
		onLoad(opt) {
			this.params_info.product_info = opt.product_info
			this.list = uni.getStorageSync('orderCreateInfo')
			this.get_address_list()
			uni.$on('selectAddrFn',(info)=>{
				this.addrInfo = info
				this.params_info.address_id = info.id
				this.getInfoFun()
			})
		},
		onUnload() {
			uni.$off('selectAddrFn')
			uni.removeStorageSync('orderCreateInfo')
		},
		methods: {
			payFun(){
				if(!this.addrInfo){
					this.$m.msg('请选择收货地址')
					return false;
				}
				uni.showLoading({
					title:'加载中...'
				})
				this.$http.getJson('orders_create', this.params_info).then((res) => {
					if (res.code == 1) {
						let id = res.order_id
						this.order_id = id
						this.jifenPayFun(id)
					} else {
						this.$m.msg(res.message)
					}
				})
			},
			jifenPayFun(id){
				this.$http.getJson('orders_jifenPay',{order_id:id,jifen:this.info.jifen_canpay}).then(res=>{
					if(res.code == 1){
						if(res.is_over == 1){
							this.$m.msg('支付成功', () => {
								this.to_redirect(`/pages2/shop-result/shop-result?id=${id}`)
							});
						}else{
							this.wxpayFun(id)
						}
					}else{
						this.$m.msg(res.message)
					}
				})
			},
			wxpayFun(id){
				this.$http.getPayParams({
					order_id: id
				}).then(res_pay => {
					if (res_pay.code != 1) {
						this.$m.msg(res_pay.message, () => {
							this.to_redirect(`/pages2/shop-order-detail/shop-order-detail?id=${id}`)
						});
						return false;
					}
					this.$http.wx_pay(res_pay.data).then(result => {
						if (result.errMsg == 'requestPayment:fail cancel' || result.errMsg == 'requestPayment:fail') {
							//用户取消支付
							this.$m.msg('取消支付', () => {
								this.to_redirect(`/pages2/shop-order-detail/shop-order-detail?id=${id}`)
							});
							return false;
						} else {
							this.$m.msg('支付成功', () => {
								this.to_redirect(`/pages2/shop-result/shop-result?id=${id}`)
							});
						}
					})
				})
			},
			getInfoFun(){
				this.$m.loading()
				this.$http.getJson('orders_getPayInfo', this.params_info).then(res => {
					console.log(res);
					uni.hideLoading()
					if (res.code == 1) {
						this.tihuo_time = res.tihuo_time
						this.info = res.data
					} else {
						this.$m.msg(res.message, () => {
							this.to_back()
						})
					}
				})
			},
			//收货地址列表
			get_address_list() {
				if(uni.getStorageSync('order_address')){
					this.addressInfo = uni.getStorageSync('order_address');
					this.params_info['address_id']=this.addressInfo.id
					this.getInfoFun()
				}else{
					this.$http.getJson('userAddress_lists', {}).then(res => {
						if (res.code == 1) {
							if (res.data.length > 0) {
								let addrInfo = null
								res.data.forEach(item=>{
									if(item.if_default == 1){
										this.addrInfo = item
									}
								})
								if(!addrInfo){
									this.addrInfo = res.data[0]
								}
								this.params_info['address_id'] = this.addrInfo.id
							}
							this.getInfoFun()
						}
					})	
				}
				
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #F6F6F6;
}
.m-address-empty{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 25rpx;
	width: 750rpx;
	height: 104rpx;
	background: #FFFFFF;
	font-size: 28rpx;
	color: #D3A358;
	font-weight: 600;
	image{
		width: 30rpx;
		height: 30rpx;
	}
}
.m-address{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25rpx;
	background: #fff;
	.m-address-left{
		width: 630rpx;
	}
	.m-address-right{
		image{
			width: 30rpx;
			height: 30rpx;
		}
	}
	.m-address-font1{
		font-size: 28rpx;
		color: #34302D;
		font-weight: 800;
	}
	.m-address-font2{
		font-size: 24rpx;
		color: #75706A;
		line-height: 33rpx;
		margin-top: 10rpx;
	}
}

.m-goods{
	width: 750rpx;
	padding: 0 25rpx;
	background: #fff;
	margin-top: 20rpx;
	.m-goods-title{
		font-size: 28rpx;
		color: #462E1A;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #E6E3DE;
	}
	.m-list{
		.m-item{
			display: flex;
			padding: 25rpx 0;
			border-bottom: 1px solid #E6E3DE;
			&:nth-last-child(1){
				border: 0;
			}
			.m-item-image{
				width: 140rpx;
				height: 140rpx;
				flex-shrink: 0;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.m-item-content{
				width: 540rpx;
				margin-left: 20rpx;
				.m-item-title{
					font-size: 28rpx;
					color: #34302D;
					line-height: 40rpx;
					font-weight: 600;
				}
				.m-item-spec{
					font-size: 24rpx;
					line-height: 33rpx;
					height: 33rpx;
					color: #9A958F;
					margin-top: 8rpx;
				}
				.m-item-bottom{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.m-item-left{
						font-size: 24rpx;
						color: #9A958F;
					}
					.m-item-right{
						.m-item-price{
							font-size: 40rpx;
							color: #DE2C38;
							&::after{
								content: '积分';
								font-size: 24rpx;
								color: #76706B;
								margin-left: 5rpx;
							}
						}
					}
				}
			}
		}
	}
}

.m-pay{
	width: 750rpx;
	background: #fff;
	padding: 32rpx 25rpx 0;
	margin-top: 20rpx;
	.m-pay-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 32rpx;
		.m-pay-left{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #34302D;
			font-weight: 600;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
		.m-pay-right{
			font-size: 24rpx;
			color: #34302D;
		}
		.m-pay-font1{
			color: #D3A358;
		}
	}
}

.m-remark{
	display: flex;
	width: 750rpx;
	margin-top: 20rpx;
	background: #fff;
	padding: 30rpx 25rpx;
	.m-remark-label{
		width: 160rpx;
		font-size: 28rpx;
		color: #34302D;
		font-weight: 600;
	}
	.m-remark-textarea{
		flex: 1;
		height: 172rpx;
		textarea{
			width: 100%;
			height: 100%;
			font-size: 28rpx;
		}
	}
}

.m-bottom{
	position: fixed;
	bottom: 0;
	z-index: 1000;
	box-sizing: content-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0,0,0,0.06);
	.m-bottom-left{
		font-size: 28rpx;
		color: #33302D;
		padding-left: 25rpx;
		.m-bottom-price{
			font-size: 40rpx;
			color: #DE2C38;
			margin-left: 12rpx;
			&::after{
				content: '积分';
				font-size: 24rpx;
				margin-left: 5rpx;
				color: #76706B;
			}
		}
	}
	.m-bottom-center{
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
		.m-bottom-detail{
			font-size: 24rpx;
			color: #33302D;
			padding-right: 24rpx;
		}
	}
	.m-bottom-right{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 240rpx;
		height: 88rpx;
		background: #D3A358;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-right: 25rpx;
		font-size: 32rpx;
		color: #fff;
	}
}

.m-popup{
	padding-bottom: 200rpx;
	.m-popup-title{
		font-size: 36rpx;
		color: #33302D;
		font-weight: 800;
		text-align: center;
		padding: 40rpx 0;
	}
	.m-popup-h3{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 25rpx;
		.m-popup-h3__left{
			font-size: 28rpx;
			color: #33302D;
			font-weight: 800;
		}
		.m-popup-h3__right{
			font-size: 28rpx;
			color: #DE2C38;
			font-weight: 800;
		}
	}
	.m-popup-grap{
		width: 750rpx;
		height: 20rpx;
		background: #f6f6f6;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}
	.m-popup-cell{
		display: flex;
		padding: 0 25rpx;
		justify-content: space-between;
		font-size: 26rpx;
		color: #76706B;
		line-height: 40rpx;
		.m-popup-cell__left{
			display: flex;
		}
		.m-popup-cell__left--title{
			max-width: 250rpx;
		}
	}
}
</style>
